<template>
  <div class="issue">
    <van-nav-bar title="发布" fixed placeholder z-index="999" />
    <van-form @submit="onSubmit">
      <van-field
        v-model="title"
        placeholder="请输入标题"
        name="text"
        label="标题"
        label-width="30px"
      />
      <van-field
        label="内容"
        v-model="content"
        name="neirong"
        rows="2"
        autosize
        type="textarea"
        placeholder="请输入内容"
        show-word-limit
        label-width="30px"
      />
<<<<<<< HEAD
  <van-field  :value="cate_name" placeholder="输入发那" name="cate_name "
  @click="Pickershow=true"
   />
      <van-popup
        v-model="Pickershow"
        position="bottom"
        :style="{ height: '30%' }"
      >
        <van-picker
          title="标题"
          show-toolbar
          value-key="name"
          :columns="cate"
          @cancel="Pickershow=false"
          @confirm="onConfirm"
        />
          <!-- @change="onChange" -->
      </van-popup>
      <!-- <van-uploader :after-read="afterRead" /> -->
      <van-field name="uploader">
=======

      <van-field label="图片" label-width="30px">
>>>>>>> afd131330dce6812e756b2d50a2ff75e2b319207
        <template #input>
          <van-uploader
            :after-read="afterRead"
            :max-count="3"
            v-model="imgbox"
          />
        </template>
      </van-field>

      <van-dropdown-menu>
        <van-dropdown-item v-model="value" :options="option" @change="gain" />
      </van-dropdown-menu>

      <div style="margin: 16px">
        <van-button block type="primary" native-type="submit" large
          >提交</van-button
        >
      </div>
    </van-form>
    <tFooter></tFooter>
  </div>
</template>
<script>
import { DropdownMenu, DropdownItem } from "vant";
import tFooter from "@/components/index.vue";
import { Picker } from "vant";
import { Popup } from "vant";
export default {
  name: "issue",

  data() {
    return {
      title: "",
      content: "",
<<<<<<< HEAD
      fileList: [],
      cate_list: [],
      // columns: ["杭州", "宁波", "温州", "绍兴", "湖州", "嘉兴", "金华", "衢州"],
      Pickershow: false,
      cate: [],
      cate_name:'',
      cate_id:'',
      imageSrc:[]
=======
      cate_list: [],
      imgbox: [],
      imageSrc: [],
      value: 0,
      option: [
        { text: "今日头条", id: "610128169b33ed00018ed5df", value: 0 },
        { text: "招聘求职", id: "609e99d6935e5b0001eaf4f2", value: 1 },
        { text: "二手市场", id: "609e99e0f2e56f000175151f", value: 2 },
        { text: "婚恋交友", id: "60e83b83a30ce80001c087a0", value: 3 },
        { text: "装修装饰", id: "60e83b96827eca0001ba827c", value: 4 },
        { text: "明日头条", id: "60e83bd9f6a3980001a11be5", value: 5 },
        { text: "劳力市场", id: "61863e3519452d00017f1a8c", value: 6 },
      ],
>>>>>>> afd131330dce6812e756b2d50a2ff75e2b319207
    };
  },

  components: {
    tFooter,
<<<<<<< HEAD
    [Picker.name]: Picker,
    [Popup.name]: Popup,
=======
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
>>>>>>> afd131330dce6812e756b2d50a2ff75e2b319207
  },
  created() {
    // this.get_cate_list()
    // this.cate = localStorage.getItem(JSON.parse("tt-cateList").data);
    let cateList=JSON.parse(localStorage.getItem("tt-cateList"))
    this.cate=cateList.data
    console.log( this.cate);

  },
  // 挂载后
  mounted() {},
  methods: {
<<<<<<< HEAD
    onConfirm(e) {
     console.log(e)
     this. Pickershow=false
     this.cate_name=e.name
     this.cate_id=e._id
     
    },
    // onChange(picker, value, index) {
    //   Toast(`当前值：${value}, 当前索引：${index}`);
    // },
   

    onSubmit(values) {
      console.log("submit", values);
      console.log(this.fileList);
=======
    gain(value) {
      console.log(value);
      console.log(this.option[this.value].text);
    },
    onSubmit(values) {
      console.log("submit", values);
>>>>>>> afd131330dce6812e756b2d50a2ff75e2b319207
      this.add_article();
    },

    async afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
      let { type } = file.file;
      //  拿到类型  比如jpg
      type = type.split("/")[1];
      console.log(type);
      let file_name = `${new Date().getTime()}_${Math.random()
        .toString(36)
        .slice(2)}.${type}`;
      // console.log(file_name);
      // 去自己的服务器拿到上传七牛云需要的 token  为何放在服务端呢?  主要是为了安全，因为里边包含了一些账号信息

      let { token } = await this.$http.post(
        "https://d33a5037-6c63-4e92-8bb1-30018ab701ea.bspapp.com/http" +
          "/upload/token"
      );
      console.log(token);
      // // new一个form data   并且把文件 token  和文件的名字放进去  file token key是固定的 不能改
      const formdata = new FormData();
      formdata.append("file", file.file);
      formdata.append("token", token);
      formdata.append("key", file_name);
<<<<<<< HEAD
      console.log(file_name,token,file);
=======
>>>>>>> afd131330dce6812e756b2d50a2ff75e2b319207

      // https://upload-z1.qiniup.com 是上传到七牛的真正接口  其中z1是华北区域

      let result = await this.$http.post(
        "https://upload-z1.qiniup.com",
        formdata
      );
<<<<<<< HEAD
        this.imageSrc.push(`http://toutiao.longxiaokj.com/` + result.key)
      console.log(`http://toutiao.longxiaokj.com/` + result.key);
      // this.fileList.push(`http://toutiao.longxiaokj.com/` + result.key)
      //       // return result;

=======
      let avatar = `http://toutiao.longxiaokj.com/` + result.key;
      this.imageSrc.push(avatar);
      this.$forceUpdate();
      //  给对象动态的添加属性 并不会触发自动更新
      console.log(result);
      console.log(`http://toutiao.longxiaokj.com/` + result.key);
>>>>>>> afd131330dce6812e756b2d50a2ff75e2b319207
      // `http://toutiao.longxiaokj.com/` + result.key  这个地址就是传到服务器的地址
      // 发布文章时 imageSrc  字段需要的就是这个
    },
    // 添加文章
    add_article() {
<<<<<<< HEAD
      let { title, imageSrc, content ,cate_name,cate_id} = this;
      let { _id, nickname } = JSON.parse(localStorage.getItem("tt-userInfo"));
      console.log(title, content, _id, nickname);
=======
      let { title, uploader, content } = this;
      let { _id, nickname } = JSON.parse(localStorage.getItem("tt-userInfo"));
      console.log(title, uploader, content, _id, nickname);
>>>>>>> afd131330dce6812e756b2d50a2ff75e2b319207
      this.$http({
        url: "/api/add_article",
        method: "POST",
        //传参
        data: {
          title,
          content,
          author: nickname,
          author_id: _id,
<<<<<<< HEAD
          imageSrc,
          cate_name,
          cate_id,
=======
          imageSrc: this.imageSrc,
          cate_name: this.option[this.value].text,
          cate_id: this.option[this.value].id,
>>>>>>> afd131330dce6812e756b2d50a2ff75e2b319207
        },
      })
        .then((res) => {
          console.log(res);
<<<<<<< HEAD
          this.title=''
          this.content=''
          this.cate_name=''
          this.imageSrc=[]
          this.fileList=[]
=======
          console.log(res.code);
          if (res.code == 0) {
            this.$toast("发布成功");
            this.imageSrc = [];
            this.imgbox = [];
            this.title = "",
            this.message = "";
          }
>>>>>>> afd131330dce6812e756b2d50a2ff75e2b319207
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<style lang='less' scoped>
::v-deep .van-button {
  margin-top: 50px;
}

</style>